<template>
  <div class="all">
    <table id="table">
      <tr>
        <td style="width: 15%; text-align: right"><span>商品分类:</span></td>
        <td>
          <el-select v-model="vote.section" placeholder="请选择">
            <el-option
              v-for="item in sections"
              :key="item"
              :label="item.sectionName"
              :value="item.sectionName"
            />
          </el-select>
        </td>
      </tr>
      <tr>
        <td style="width: 15%; text-align: right">公告标题:</td>
        <td><el-input v-model="vote.voteTitle" placeholder="请输入内容" /></td>
      </tr>
<!--      <tr>-->
<!--        <td style="width: 15%; text-align: right">日期:</td>-->
<!--        <td>-->
<!--          <el-date-picker-->
<!--            v-model="value3"-->
<!--            type="datetime"-->
<!--            placeholder="选择日期时间"-->
<!--            default-time="12:00:00"-->
<!--          />-->
<!--        </td>-->
<!--      </tr>-->
      <tr>
        <td style="width: 20%; text-align: right">内容:</td>
        <td>
          <div>
            <tinymce v-model="vote.content" />
          </div>
        </td>
      </tr>
      <tr v-for="(vote, index) in voteOptions" :key="vote">
        <td style="width: 20%; text-align: right">投票选项{{ index+1 }}：</td>
        <td style="vertical-align: center">{{ vote }}
          <span>
            <el-image
              style="width: 80px; height: 80px"
              :src="voteOptionPics[index]"
              fit="contain"></el-image>
          </span>
          <span style="margin-right: 10px; margin-left: 10px"><el-button class="el-icon-delete" type="danger" @click="deleteVoteOption(index)"></el-button></span>
        </td>
      </tr>
      <tr>
        <td style="width: 20%; text-align: right">投票选项：</td>
        <td>
          <el-input v-model="voteOption"></el-input>
        </td>
      </tr>
      <tr>
        <td style="width: 20%; text-align: right">选项图片：</td>
        <td>
          <el-upload
            action="#"
            :on-change="handleChange"
            :auto-upload="false"
            :on-preview="handlePreview"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="onSuccess">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </td>
      </tr>
      <tr>
        <td />
        <td><span @click="addVoteOption"><i class="el-icon-plus"></i>新增投票选项</span></td>
      </tr>
      <tr>
        <td />
        <td><el-button type="primary" @click="addVote">提交</el-button></td>
      </tr>
    </table>
  </div>
</template>
<script>
// import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import tinymce from '@/components/Tinymce'
import { addVote, getAllSections } from '../../api/communityHelp/vote'
import { uploadImg } from '../../api/ec/img'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'] // 清除文本格式-----['clean']
]

export default {
  components: {
    tinymce
  },
  data() {
    return {
      sections: [],
      vote: {
        voteId: '',
        userId: '',
        voteTitle: '',
        date: '',
        content: '',
        communityId: '',
        status: '',
        section: ''
      },
      kind: '',
      goodsKind: ['柴米油盐', '新鲜蔬菜', '时令水果'],
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: toolbarOptions // 工具栏设置
        }
      },
      title: '',
      voteOption: '',
      voteOptions: [],
      voteOptionPics: [],
      voteData: {
        helpVote: {},
        helpVoteOptions: []
      },
      imgFile: null,
      imgUrl: ''
    }
  },
  mounted() {
    getAllSections().then(response => {
      this.sections = response
    })
  },
  methods: {
    handleChange(file) {
      this.imgFile = file.raw
      const form = new FormData()
      form.append('file', this.imgFile)
      uploadImg(form).then(response => {
        console.log('response')
        console.log(response)
        this.imgURL = response.data
      })
      console.log(file)
    },
    handlePreview(file) {
      console.log(file)
    },
    onSuccess(response) {
      console.log('response')
      console.log(response)
    },
    handleRemove(file) {
      console.log(file)
    },
    deleteVoteOption(index) {
      this.voteOptions.splice(index, 1)
      this.voteOptionPics.splice(index, 1)
    },
    addVoteOption() {
      this.voteOptions.push(this.voteOption)
      this.voteOptionPics.push(this.imgURL)
    },
    addVote() {
      this.vote.status = '投票中'
      this.vote.date = this.dateFormat()
      this.voteData.helpVote = this.vote
      for (let i = 0; i < this.voteOptions.length; i++) {
        const temp = {
          optionId: 0,
          voteId: 0,
          optionTitle: this.voteOptions[i],
          optionPic: this.voteOptionPics[i],
          num: 0
        }
        this.voteData.helpVoteOptions.push(temp)
      }
      addVote(this.voteData).then(response => {
        if (response.code === 200) {
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    }
  }
}
</script>

<style>
.all {
  width: 80%;
  margin: 45px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#table {
  padding: 30px 45px;
  color: #6d7e8d;
}

#table tr td {
  padding: 5px 0 5px 15px;
  vertical-align: top;
}
#table tr td:first-child {
  padding-top: 12px;
}
/*.ql-editor {*/
/*  height: 300px;*/
/*  !* width: 1120px; *!*/
/*}*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
